<template>
    <el-card shadow="never" style="max-height: 70vh; overflow: auto">
        <el-form ref="form" :model="form" :rules="rules" label-width="90px" :disabled="disabled">
            <el-form-item label="id:" prop="id" v-show="false">
                <el-input v-model="form.id" disabled/>
            </el-form-item>
            <el-form-item label="社群名称:" prop="title">
                <el-input v-model="form.title" placeholder="请输入社群名称"/>
            </el-form-item>
            <el-form-item label="状态:" prop="status">
                <el-select v-model="form.status" placeholder="请选择状态" clearable>
                    <el-option v-for="(item, index) in status" :key="index" :label="item.label" :value="item.value"/>
                </el-select>
            </el-form-item>
            <el-form-item label="所属分类:" prop="catid1">
                <SelectCategory :value="[form.catid1, form.catid2]" :url="editFormParams.tree"
                                @change="onChangeCate"></SelectCategory>
            </el-form-item>
            <el-form-item label="所属地区:" prop="province">
                <SelectCityArea ref="city" :value="[form.province_id, form.city_id, form.district_id]"
                                @change="onChangeCityArea"></SelectCityArea>
            </el-form-item>
            <el-form-item label="二维码地址:" prop="qrcodeUrl">
                <ImageUpload v-model="form.qrcodeUrl"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm">确认</el-button>
                <el-button type="warning" @click="cancel">取消</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script>
import {regionData} from 'element-china-area-data'
import SelectCategory from "@/components/My/SelectCategory";
import SelectCityArea from "../../../components/My/SelectCityArea";

export default {
    name: 'EditForm',
    components: {SelectCityArea, SelectCategory},
    props: {
        findFormData: {
            type: Object,
            default: {}
        },
        editFormParams: {
            type: Object,
            default: {}
        },
        // 表单是否禁用
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            // 编辑表单验证规则
            rules: {
                title: [{required: true, message: "请输入社群名称", trigger: "blur"}],
                status: [{required: true, message: "请输入状态", trigger: "blur"}],
                catid1: [{required: true, message: "请输入所属分类", trigger: "blur"}],
                catid2: [{required: true, message: "请输入所属分类", trigger: "blur"}],
                province: [{required: true, message: "请输入省", trigger: "blur"}],
                province_id: [{required: true, message: "请输入省编号", trigger: "blur"}],
                city: [{required: true, message: "请输入市", trigger: "blur"}],
                city_id: [{required: true, message: "请输入市编号", trigger: "blur"}],
                district: [{required: true, message: "请输入区", trigger: "blur"}],
                district_id: [{required: true, message: "请输入区编号", trigger: "blur"}],
            },
            form: {},
            // 区域选择配置
            areaOptions: regionData,
            status: [
                {label: "正常", value: 1},
                {label: "禁用", value: 2},
            ],
        }
    },
    watch: {
        findFormData: {
            handler(nval) {
                if (JSON.stringify(nval) != '{}') {
                    this.$nextTick(() => {
                        this.form = nval
                    })
                }
            },
            immediate: true,
            deep: false,
        },
    },
    methods: {
        // 取消按钮
        cancel() {
            this.$emit('editFormCancel')
        },
        submitForm() {
            this.$refs['form'].validate((valid, obj) => {
                if (valid) {
                    this.$emit('submitForm', this.form)
                }
            })
        },
        // 表单重置
        reset() {
            this.resetForm('form')
        },
        onChangeCate(e) {
            this.$set(this.form, 'catid1', e.length >= 1 ? e[0] : '')
            this.$set(this.form, 'catid2', e.length >= 2 ? e[1] : '')
        },
        onChangeCityArea(e) {
            if (e.length >= 3) this.$set(this.form, 'district_id', e[2])
            if (e.length >= 2) this.$set(this.form, 'city_id', e[1])
            if (e.length >= 1) this.$set(this.form, 'province_id', e[0])
            let pathLabels = this.$refs.city.getCheckedNodes()[0].pathLabels
            if (pathLabels.length >= 3) this.$set(this.form, 'district', pathLabels[2])
            if (pathLabels.length >= 2) this.$set(this.form, 'city', pathLabels[1])
            if (pathLabels.length >= 1) this.$set(this.form, 'province', pathLabels[0])
        }
    }
}
</script>
